<template>
    <div>
        <mt-header fixed title="注册">
            <router-link to="/" slot="left" replace>
                <mt-button icon="back"></mt-button>
            </router-link>
            <router-link to="/" slot="right" replace>
                <mt-button>
                    <i class="iconfont icon-close"></i>
                </mt-button>
            </router-link>
        </mt-header>

        <div class="field-part">
            <mt-field placeholder="请输入手机号" v-model.trim="info.phoneNo">
                <mt-button @click="getValidCode" :disabled="valideCodeEnabled === false" style="margin: 0 3px; font-size: 14px;">{{validText}}</mt-button>
            </mt-field>
            <mt-field placeholder="输入验证码" v-model.trim="info.validCode"></mt-field>
            <mt-field placeholder="密码" v-model.trim="info.password" type="password"></mt-field>
            <mt-field placeholder="确认密码" v-model.trim="info.rePassword" type="password"></mt-field>
            <mt-field placeholder="真实姓名" v-model.trim="info.username"></mt-field>
            <mt-field placeholder="身份证号" v-model.trim="info.idCard"></mt-field>
        </div>
        <div class="px-2 mt-6">
            <mt-button size="large" type="primary" class="bg-light-blue" @click="submit">提交</mt-button>
        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'
import userApi from '@/api/user'
import { Const } from '@/consts'
import utils from '@/utils'
import { MessageBox } from 'mint-ui'
var IDValidator = require('id-validator');
var GB2260 = require('id-validator/src/GB2260');

var Validator = new IDValidator(GB2260)
export default {
    data () {
        return {
            info: {
                phoneNo: '',
                validCode: '',
                validCodeToken: '',
                password: '',
                rePassword: '',
                username: '',
                idCard: ''
            },
            validTextDefault: '获取验证码',
            validText: '获取验证码',
            valideCodeEnabled: true
        };
    },

    methods: {


        getValidCode () {
            // validation...

            if (this.valideCodeEnabled === false || !this.formValidate('phoneNo')) {
                return;
            }

            let timeId = utils.toggleValidCodeBtn(this);

            let data = {};
            data.params = {
                phoneno: this.info.phoneNo,
                usage: Const.USAGE_REGISTER
            };
            data.headers = {};
            data.headers[Const.H_VERIFICATION] = '';

            //console.log(data);

            userApi.getValidCode(data).then(resp => {
                // TODO:
                // this.info.validCode = resp[Const.RESP_RESULT] || '';
                this.info.validCodeToken = resp[Const.RESP_RESULT] || '';
                // Toast(resp[Const.RESP_MESSAGE]);
            }).catch(resp => {
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '出错了 ...');
                }
                this.validText = this.validTextDefault;
                utils.toggleValidCodeBtn(this, timeId);
            });

        },

        formValidate (field) {
            if ((!field || field.indexOf('phoneNo') >= 0) && !this.info.phoneNo) {
                Toast('请填写手机号');
                return false;
            }

            if ((!field || field.indexOf('phoneNo') >= 0) && !/[0-9]{11}/.test(this.info.phoneNo)) {
                Toast('请填写正确手机号');
                return false;
            }

            if ((!field || field.indexOf('validCode') >= 0) && !this.info.validCode) {
                Toast('请填写验证码');
                return false;
            }

            if ((!field || field.indexOf('password') >= 0) && !this.info.password) {
                Toast('请填写密码');
                return false;
            }

            if ((!field || field.indexOf('password') >= 0) && this.info.password.length < 8) {
                Toast('密码至少包含8个字符');
                return false;
            }

            if ((!field || field.indexOf('password') >= 0) && !/^[-0-9a-zA-Z!"#$%&'()*+,./:;<=>?@[\\\]^_`{|}~]+$/.test(this.info.password)) {
                Toast('密码只能包含数字、字母和常见字符');
                return false;
            }

            if ((!field || field.indexOf('rePassword') >= 0) && this.info.password != this.info.rePassword) {
                Toast('两次输入的密码不一致');
                return false;
            }

            if ((!field || field.indexOf('username') >= 0) && !this.info.username) {
                Toast('请填写姓名');
                return false;
            }

            if ((!field || field.indexOf('idCard') >= 0) && !this.info.idCard) {
                Toast('请填写身份证号');
                return false;
            }

            if ((!field || field.indexOf('idCard') >= 0) && !Validator.isValid(this.info.idCard)) {
                Toast('请填写正确身份证号');
                return false;
            }

            return true;
        },

        formatParams () {
            let data = {
                params: {
                    phoneno: this.info.phoneNo,
                    password: this.info.password,
                    realname: this.info.username,
                    idcardno: this.info.idCard
                },
                headers: {
                }
            }

            data.headers[Const.H_VERIFICATION_SMS] = this.info.validCode;
            data.headers[Const.H_VERIFICATION_SMS_TOKEN] = this.info.validCodeToken;

            return data;
        },

        submit () {

            // validation...
            if (!this.formValidate()) {
                return;
            }

            userApi.register(this.formatParams()).then(resp => {
                MessageBox.confirm('您现在要登录吗？', '温馨提示', {
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                    closeOnClickModal: false,
                    type: 'info'
                }).then(() => {
                    this.$router.replace('/login');
                }).catch();
            }).catch(resp => {
                Toast(resp[Const.RESP_MESSAGE]);
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.field-part {
  margin-top: 60px;
  margin-left: 16px;
  margin-right: 16px;
}
</style>
